<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--键值对，key=value-->
<title>我的HTML笔记</title>
<link href="logo.ico"/> 
<link rel="stylesheet" type="text/css" href="/raw/master/mystyle.css">
</head>

<body>
<div>
<h1>HTML笔记</h1>
<b>摘要</b>：动手用<a href="next.html">HTML</a>做一个关于HTML的笔记。分分钟写出有一个Word，从此告别office软件。
<br/>
<b>关键字</b>：标签，文本，多媒体，表格

<div align="center">
<img src="html.png" width=200 height=200 alt="local image">
</div>

<h2>HTML标签</h2>
    <em>HTML 元素</em>包含各种标签
    <h3>标签分类</h3>
<p>
    HTML标签：闭合标签、空标签</br>

    <ul><li>闭合标签：含文本信息
    <xmp>
    <标签名 属性=值 属性=值 属性...>文本</标签名>
  </xmp>
  比如
  <xmp>
  <div class="poem">
    <h2> 你的泪水</h2>
    <font face="verdana" color="green"><em>
如果整个世界都是苍白的<br/>
那么，你的泪水<br/>
一定会让万物之灵再次新生
    </em></font>
  </div>
  </xmp></li>
  <li>空标签: 不含文本信息
<xmp>
    <标签名 属性=值 .../>
  </xmp>
效果：
  <div class="poem">
    <h2> 你的泪水</h2>
   <em>
如果整个世界都是苍白的<br/>
那么，你的泪水<br/>
一定会让万物之灵再次新生
    </em>
  </div>

  比如
  <xmp>
    <br />
  </xmp></li>
</p>
</ul>
<h3>常用标签</h3>
<ul>
  <li>文本
  <ul>
  <li>p: 表示段落</li>
  <li>h1, h2, h3, ...: 章节标题</li>
  <li>br: 断行</li>
  </ul></li>
  <li>文本格式
  <ul>
  <li>font: 字体</li>
  <li>em: 斜体（强调）</li>
  <li>b: 加粗</li>
  </ul></li>
  <li>多媒体
    <ul>
  <li>img: 图片</li>
  <li>audio: 音频</li>
  <li>video: 视频</li>
  <li>a: 超链接</li>
  </ul></li>
</ul>

<h2>多媒体</h2>
超越文本。HTML文件本身不含这些多媒体资源，只能包含资源的链接(url)，或者处理这些链接的脚本。
<h3>标签格式</h3>
下面是嵌入音频和视频的标签。
  <xmp>
<img src="http://www.zzjc.edu.cn/upload/n_20190919083423.jpg" width="350" height="150" />
<!-- img是一个空标签 -->
<video controls="controls">
    <source src="/Users/william/Movies/芳华.mp4" type="video/mp4">
</video>

<video src="/Users/william/Movies/芳华.mp4" controls="controls">
</video>
  </xmp>
<h3>运行效果</h3>
  让我们在此处嵌入图片试一下
 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571244743023&di=69363843afe0a9caec6e5f7945a83004&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1367109401%2C712034892%26fm%3D214%26gp%3D0.jpg" width="350" height="320" alt="Web developement"/> 

<h2>表格</h2>
<table border="1">
<tr>
  <th>姓名</th>
  <th>学号</th>
  <th>性别</th>
</tr>
<tr>
<td>王境泽</td><td>1</td><td>男</td>
</tr>
<tr>
<td>蔡徐坤</td><td>2</td><td>男</td>
</tr>
</table>

<h2>CSS</h2>
<h3>CSS格式</h3>
标签名选择器
<xmp>
  标签名 {
  属性: 属性值;
  属性: 属性值;
  属性: "属性值 属性值";
}
</xmp>
例子
<xmp>
  body {
  background-color: rgba(199, 235, 140, 0.51);
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

h1 {
  font-family: "Bradley Hand", cursive;
  font-size: 50px;
  color: #ff00b1;
  text-align: center
}

h2 {
  color: lightcoral
}
</xmp>

类名-id名选择器
<xmp>
  .class值 {
  属性: 属性值;
  属性: 属性值;
  属性: "属性值 属性值";
}
#id值 {
  属性: 属性值;
  属性: 属性值;
  属性: "属性值 属性值";
}
</xmp>
关系选择器
<xmp>
.class 子标签名(子标签class) {
  属性: 属性值;
  属性: 属性值;
  属性: "属性值 属性值";
}
</xmp>

<h3>引入CSS格式</h3>
<xmp>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</xmp>
</body>